<template>
  <div id="offline-comp-list">
    <div class="batch-online-class">
      <el-button
        type="primary"
        size="mini"
        style="float: right;"
        :disabled="!isAllBatch"
        @click="batchOnlineComp"
      >批量上线</el-button>
    </div>
    <el-table
      ref="offlineTblRef"
      :data="offlineTblData"
      tooltip-effect="dark"
      style="width: 100%;"
      max-height="500"
      border
      header-cell-class-name="offline-header-cell"
      cell-class-name="comp-info-cell"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="(item, index) in offlineHeader"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div v-if="item.isOp">
            <el-button type="text" size="mini" @click="onlineComp([scope.row.id])">上线</el-button>
          </div>
          <span v-else>{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getOfflineList, onOfflineComps } from '@/api/component'

export default {
  name: 'OnlineCompList',
  data() {
    return {
      offlineHeader: [{
        prop: 'name',
        label: '组件名称'
      }, {
        prop: 'branch',
        label: '分支'
      }, {
        prop: 'tag',
        label: '组件Tag'
      }, {
        prop: 'supervisor',
        label: '负责人'
      }, {
        prop: 'operation',
        label: '操作',
        isOp: true,
        width: '100px'
      }],
      offlineTblData: [],
      multipleSelection: [],
      isAllBatch: false
    }
  },
  emits: ['submit-online'],
  mounted() {
    // 查询下线列表
    this.getOfflineList()
  },
  methods: {
    getOfflineList() {
      getOfflineList({ projectId: this.$route.meta.projectId }).then(res => {
        const list = res.data
        if (list && list.length > 0) {
          this.offlineTblData = list
        }
      }).catch(err => {
        console.error(err)
        this.$message.error('获取下线组件数据失败！！')
      })
    },
    handleSelectionChange(val) {
      this.isAllBatch = val.length > 0
      this.multipleSelection = val
    },

    batchOnlineComp() {
      const compIds = []
      this.multipleSelection.forEach(item => compIds.push(item.id))
      this.onlineComp(compIds)
    },

    // 上线操作
    onlineComp(compIds) {
      onOfflineComps({ compIds: compIds, activeType: 1 }).then(res => {
        this.$message.success('操作成功')
        this.$emit('submit-online')
      }).catch(err => {
        console.error(err)
        this.$message.error('操作失败！！')
      })
    }
  }
}
</script>

<style scoped>
#offline-comp-list /deep/ .offline-header-cell {
  color: #000;
  text-align: center;
}

#offline-comp-list /deep/ .comp-info-cell {
  text-align: center;
  font-size: 14px;
}
.batch-online-class {
  width: 100%;
  height: 40px;
}
</style>
